import React, { useState } from 'react'
import { Picker, Button } from 'antd-mobile'
import { Picker as PickerV2 } from 'antd-mobile-v2'
import './style.scss'

const basicColumns = [
    [
        { label: '周一', value: 'Mon' },
        { label: '周二', value: 'Tues' },
        { label: '周三', value: 'Wed' },
        { label: '周四', value: 'Thur' },
        { label: '周五', value: 'Fri' },
    ],
    [
        { label: '上午', value: 'am' },
        { label: '下午', value: 'pm' },
        { label: '夜里', value: '夜里' },
        { label: '无名', value: '无名' },
    ],
]

// 基础用法
function V5() {
    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState(['M'])
    return (
        <>
            <Button onClick={() => setVisible(true)} >
                V5.0.0-rc.23
            </Button>
            <Picker
                title='V50023'
                className='picker-v50023'
                columns={basicColumns}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                value={value}
                onConfirm={v => {
                    setValue(v)
                }}
            />
        </>
    )
}
function V2() {
    const [value, setValue] = useState(['Wed', '夜里'])
    return (
        <>
            <PickerV2
                title='V2'
                className='picker-v2'
                data={basicColumns}
                cascade={false}
                extra="请选择(可选)"
                value={value}
                onChange={v => setValue(v)}
                onOk={v => setValue(v)}
            >
                <Button >V2.3.4</Button>
            </PickerV2>
        </>
    )
}

export default () => {
    return (
        <div className='m-picker'>
            <section>
                <V5 />
                <V2 />
            </section>
        </div>
    )
}